<script setup lang="ts">
import type { patientInfo } from '@/api/type.ts'
import { Delete, Edit } from '@element-plus/icons-vue'
import { reqDeleteUser } from '@/api/user.ts'
import { useRouter } from 'vue-router'
const router = useRouter()

const { onePatient } = defineProps<{ onePatient: patientInfo }>()
const emit = defineEmits(['getAllPatient', 'changeShowType']) //父组件patient传递过来的函数

const deleteUserFun = async (id: number) => {
    await reqDeleteUser(id)
    emit('getAllPatient')
}
const assessSituation = () => {
    if (router.currentRoute.value.path == '/user/patient') {
        emit('changeShowType', 'edit', onePatient)
    } else {
        // 从Register_step2跳转到patient?type=edit&id=xxx
        router.push({ path: '/user/patient', query: { type: 'edit', id: onePatient.id } })
    }
}
</script>

<template>
    <div class="patient-item">
        <h4>
            <em>{{ onePatient.isInsure == 1 ? "医保" : "自费" }}</em>
            <i>{{ onePatient.name }}</i>
            <el-button type="primary" :icon="Edit" circle @click="assessSituation()" />
            <el-popconfirm v-if="router.currentRoute.value.path == '/user/patient'" title="确认删除吗？"
                @confirm="deleteUserFun(onePatient.id)">
                <template #reference>
                    <el-button type="danger" :icon="Delete" circle />
                </template>
            </el-popconfirm>
        </h4>
        <div class="p-box">
            <p>证件类型：{{ onePatient?.param?.certificatesTypeString }}</p>
            <p>证件号码：{{ onePatient?.certificatesNo }}</p>
            <p>用户性别：{{ onePatient?.sex == 1 ? '男' : '女' }}</p>
            <p>出生日期：{{ onePatient.birthdate }}</p>
            <p>手机号码：{{ onePatient.phone }}</p>
            <p>婚姻状况：{{ onePatient.isMarry == 1 ? '已婚' : '未婚' }}</p>
            <p>当前住址：{{ onePatient?.param?.cityString }}</p>
            <p>详细地址：{{ onePatient?.param?.fullAddress }}</p>
        </div>
        <slot></slot>
    </div>

</template>

<style scoped lang="scss">
.patient-item {
    width: 30%;
    margin: 10px;
    border: 1px solid var(--border-color);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: relative;

    h4 {
        font-size: 14px;
        height: 50px;
        line-height: 50px;
        color: var(--text-color);
        background-color: var(--gray-color1);
        position: relative;

        em {
            border-radius: 4px;
            background-color: white;
            margin: 0 4px 0 30px;
            padding: 2px 4px;
        }

        i {
            font-size: 16px;
            color: var(--gray-color2);
        }

        .el-button {
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            right: 10px;
        }

        .el-button--primary {
            right: 50px;
        }

    }

    .p-box {
        p {
            margin: 16px 0;
            padding-left: 20px;
        }
    }

}
</style>